<template>
  <section id="default">
    <div style='padding-bottom:50px;'>
        <el-row class='header-top'>
          <el-col :span='6' style='height:100%;'>
            <span class='home' @click='headerGo'></span>
          </el-col>
          <el-col :span='12'>购物车</el-col>
          <el-col :span='6' style='height:100%;'>
            <span class='edit' @click='controlEdit=!controlEdit'>
              <span v-if='!controlEdit'>编辑</span>
              <span v-else>完成</span>
            </span>
          </el-col>
        </el-row>
        
        <div style='padding-top:55px;margin-bottom:60px;'>
          <div v-if='controlEdit' class='edit-info'>
            <div style='float:left'>
              <span class='el-icon-close'></span>
              &nbsp;
              <span>清理工具</span>
            </div>
            <div style='float:right' @click='delGoods'>
              <div class='del-goods'>
                删除
              </div>
            </div>
          </div>
          <div v-if='carList.length'>
            <Bar></Bar>
            <el-row 
              style='height:111px;padding:10px 12px;background:white;border-bottom:1px solid #eee;'
              v-for="(val,index) in carList" 
              :key='index'
            >
              <el-col :span='2' style='height:100%;' :class="{'radio':true,'radio-yes':val.radioOff,'radio-no':!val.radioOff}">
                <div style='height:100%;' @click='changeGoods(index)'></div>
              </el-col>
              <el-col :span='6'>
              <div style='width:90px;height:90px;'>
                <img 
                  :src="val.image" 
                  width="100%"
                  height="100%"
                  alt="goods">
              </div>
              </el-col>
              <el-col :span='15' style='height:100%;padding-top:10px;' :offset='1' class='goods-content'>
                <h2 @click='goGoodsInfo(val.goodsNum)'>{{val.goodsName}}</h2>
                <p style='padding-top:5px;color:#999;font-size:12px;'>
                  <template v-if='val.goodsPropertyJson'>
                    <span v-for="(guige,suoyin) in JSON.parse(val.goodsPropertyJson)" :key='suoyin'>
                      <span v-for="(zhi,key) in guige" :key='key'>
                        <span>{{zhi}}</span>
                      </span>
                    </span>
                  </template>
                </p>
                <el-row style='height:25px;padding-top:8px;'>
                  <el-col :span='14' style='line-height:25px;font-size:15px;'>￥{{handleMoney(val.salesPrice)}}</el-col>
                <el-col :span='9'>
                  <el-row>
                    <el-col :span='8' class='change-count' style='background:red;'>
                      <div @touchstart.stop='reduce(index)' class='animated' :ref='"reduce"+index' style='background:white'>-</div>
                    </el-col>
                    <el-col :span='8' class='change-count' style='border-right:none;border-left:none;' >
                      <div :ref='"count"+index' class='animated'>
                        {{val.count}}
                      </div>
                    </el-col>
                    <el-col :span='8' class='change-count' style='background:red;'>
                      <div @touchstart.stop="increase(index)" class='animated' :ref="'increase'+index" style='background:white'>+</div> 
                    </el-col>
                  </el-row>
                </el-col>
                </el-row>
              </el-col>
            </el-row>
          <el-row class='pay-fixed'>
            <el-col :span='2' :class="{'all-radio':true,'radio-yes':allRadio,'radio-no':!allRadio}">
              <div style='height:100%' @click='changeAll'></div>
            </el-col>
            <el-col :span='3' style='color:#999;'>
              <span @click='changeAll'>全选</span>
            </el-col>
            <el-col :span='10' style='text-align:right;'>
              合计：
              <span style='color:red;'>￥{{handleMoney(allMoney)}}</span>
            </el-col>
            <el-col :span='8' :offset='1' class='pay'>
              <div @click='readyOrder'>结算</div>
            </el-col>
          </el-row>
          </div>
          <div class='car-empty' v-else>
          哎呀！购物车是空的
        </div>
        </div>


    </div>
     <!-- 这两个层都是控制左边导航 -->
    <!-- <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/>
    <transition
        enter-active-class='animated bounceInLeft'
        leave-active-class='animated bounceOutLeft'
    >
        <Left v-if='controlModel'  @changeType='changeType'/>
    </transition> -->
    <!-- 这两个层都是控制左边导航 -->

    <!-- 这一个层是聊天二维码 -->
    <!-- <transition
        enter-active-class='animated fadeIn'
        leave-active-class='animated fadeOut'
    >
        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
    </transition> -->
    <!-- 这一个层是聊天二维码 -->
    <!-- <Bottom @openLeft='controlModel=true' @openQr='controlQr=true' @car='goCar' @goIndex='goIndex'/> -->

  </section>
</template>
<script>
import Left from '@/components/left.vue';
import Bottom from '@/components/bottom.vue';
import CloseLeft from '@/components/close-left.vue';
import Qr from '@/components/qr.vue';
import Bar from '@/components/Bar.vue';
import {_money,_layer} from '@/comm.js';
export default {
  data(){
    return ({
      //轮播图
      imgArr:[
            'http://cdn.temzt.cn/appbanana/20180625/_g29d7527ad217451088fc6754f24c18ad.jpg',
            'http://cdn.temzt.cn/appbanana/20180626/_gd684862c5e8c4cdb9a7f3f56e2324da9.jpg'
      ],
      //商品规格图
      guigeImg:[
            'http://img.vipshequ.cn/picture/size800img/2013_6_28_0_1773178501.jpg',
            'http://img3.imgtn.bdimg.com/it/u=2151683135,2840656928&fm=27&gp=0.jpg',
            'http://image.ehmall.com.cn/productinfo/2014/07/11/121068.jpg'
      ],
      controlModel:false,     //控制左边导航
      controlQr:false,        //控制二维码
      allMoney:0,          //结算的钱
      controlEdit:false,   //控制编辑
      allRadio:false,      //控制全选样式
      carList:[
          {
            radioOff:true,
            goodsName:'你好，世界',
            image:'http://imgsrc.baidu.com/imgad/pic/item/c75c10385343fbf2618015f7ba7eca8064388fb2.jpg',
            goodsNum:'69787988789798',
            // goodsPropertyJson:"[{'大小':'小','颜色':'红色'}]",
            salesPrice:'1000',
            count:1
          }
      ],          //购物车数据
      buildOrderInfo:[]    //结算数据
    });
  },
  beforeCreate(){
    $('body').attr('title','购物车列表');
    // this.getShoppingInfo();
  },
  components:{
    Left,
    Bottom,
    CloseLeft,
    Qr,
    Bar
  },
  methods:{
    //左边导航的选择
    changeType(){},
    goCar(){
        this.$router.push({path:'/myCarList'});
    },
    //回到主页
    goIndex(){
      this.$router.push({path:'/index'});
    },
    headerGo(){
      this.$router.push({path:'/index'});
    },

    //得到购物车信息
      getShoppingInfo(){
        let This=this;
        // AJAX(SHOPPING_CAR,'GET',{},function(data){
        //   if(data.retult){
        //     if(!data.data) return ;
        //     This.carList=data.data.map(function(val){
        //       val.radioOff=false;
        //       return val;
        //     });
        //   }else{
        //     _layer(data.message);
        //   }
        // });
      },
      //结算
      readyOrder(){
        if(!this.buildOrderInfo.length){
          _layer('请选择商品进行结算');
        }else{
          let send=[];
          let data=this.buildOrderInfo;
          for(let i=0;i<data.length;i++){
            let count='';
            for(let j=0;j<this.carList.length;j++){
              if(this.carList[j].goodsNum==data[i].goodsNum){
                count=this.carList[j].count;
                break;
              }
            }
            let obj={
              goodsNum:data[i].goodsNum,
              count:count,
              specNum:data[i].specNum
            };
            send.push(obj);
          }
          window.location.href=HREF+'/order-submit.html?car=1&data='+encodeURIComponent(JSON.stringify(send));
        }
      },
      //进入商品详情
      goGoodsInfo(num){
        window.location.href=HREF+'/goods-info.html?num='+num;
      },
      //删除购物车商品
      delGoods(){
        if(!this.buildOrderInfo.length){
          _layer('请选择商品');
        }else{
          let send=[];
          let data=this.buildOrderInfo;
          for(let i=0;i<data.length;i++){
            send.push(data[i].id);
          }
          let form=new FormData();
          form.append('ids',send);
          let This=this;
          $.ajax({
             url:DELETE_SHOPPING,
               headers:{ 
                 token:localStorage.getItem('token')
               }, 
                 processData: false,
                       contentType: false,
               type: 'post',
               data:form,
               success: function (res) {
                if(res.retult){
                  This.buildOrderInfo=[];
                  let arr=[];
                  for(let j=0;j<This.carList.length;j++){
                    let off=false;
                    for(let i=0;i<send.length;i++){
                      if(send[i]==This.carList[j].id){
                        off=true;
                        break;
                      }
                    }
                    if(!off){
                      arr.push(This.carList[j]);
                    }
                  }
                  This.carList=arr;
                }else{
                  _layer(res.message);
                }
               },
               error:function(){
                _layer('服务器开小差了');
               }
          });
        }
      },
      //选中该商品并切换选中背景
      changeGoods(index){
        let radioOff=!this.carList[index].radioOff;
        this.carList[index].radioOff=radioOff;
        if(radioOff){
          this.buildOrderInfo.push({
            goodsNum:this.carList[index].goodsNum,
            count:this.carList[index].count,
            specNum:this.carList[index].specNum,
            id:this.carList[index].id,
          });
          if(this.buildOrderInfo.length==this.carList.length){
            this.allRadio=true;
          }
        }else{
          this.allRadio=false;
          for(let i=0;i<this.buildOrderInfo.length;i++){
            if(this.buildOrderInfo[i].goodsNum==this.carList[index].goodsNum){
              this.buildOrderInfo.splice(i,1);
              break ;
            }
          }
        }
        this.computeMoney();
      },
      //全选
      changeAll(){
        this.buildOrderInfo=[];
        if(this.allRadio){
          this.carList.map(function(val){
            val.radioOff=false;
            return val;
          });
        }else{
          for(let i=0;i<this.carList.length;i++){
            this.carList[i].radioOff=true;
            this.buildOrderInfo.push({
              goodsNum:this.carList[i].goodsNum,
              count:this.carList[i].count,
              specNum:this.carList[i].specNum,
              id:this.carList[i].id,
            });
          }
            
        }
        this.computeMoney();
        this.allRadio=!this.allRadio;
      },
      //处理金钱
      handleMoney(val){
        return _money(val);
      },
      //计算总价钱
      computeMoney(){
        let money=0;
        this.carList.forEach(function(val){
          if(val.radioOff){
            money+=val.count*val.salesPrice;
          }
        });
        this.allMoney=money;
      },
      //增加
      increase(index){
        GET_AJAX(ADD_CAR_COUNT+`/${this.carList[index].id}/${this.carList[index].count+1}`,{},(data)=>{
          if(data.retult){
            this.carList[index].count++;
            this.computeMoney();
            this.animated('increase'+index,index);
          }else{
            _layer(data.message);
          }
        });
      },
      //减少
      reduce(index){
        let count=this.carList[index].count;
        if(count>1){
          GET_AJAX(ADD_CAR_COUNT+`/${this.carList[index].id}/${this.carList[index].count-1}`,{},(data)=>{
            if(data.retult){
              this.carList[index].count=count-1;
              this.computeMoney();
              this.animated('reduce'+index,index);
            }else{
              _layer(data.message);
            }
          });
        }
      },
      animated(elAni,index){
        let elCount=this.$refs['count'+index];
        let el=this.$refs[elAni];
        $(el).addClass('bounceIn');
          $(elCount).addClass('rotateIn');
        setTimeout(function(){
          $(el).removeClass('bounceIn');
            $(elCount).removeClass('rotateIn');
        },500);
      },



  },
  mounted(){
    setTimeout(function(){
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
        $('.animation').click(function(){
            let el=$(this)
            el.addClass('bounceIn');
            setTimeout(function(){
                el.removeClass('bounceIn');
            },300);
        });
        $('.animation1').click(function(){
            let el=$(this)
            el.addClass('jello');
            setTimeout(function(){
                el.removeClass('jello');
            },300);
        });
    },300);
  }
}
</script>
<style scoped>
   .title{
        padding:10px 10px;
        font-size:16px;
        letter-spacing: 1px;
        line-height: 26px;
   }
   .btn-compute > div{
        width:33.3%;
        height:30px;
        float:left;
        font-size:22px;
        text-align: center;
        line-height: 20px;
        color:#0e74de;
   }
   .change-guige{
        padding:15px 18px;
        font-size:16px;
        color:#999;
   }
   .animated {
      animation-duration: .4s;
      animation-fill-mode: both;
  }
  .header-top{
    position:fixed;
    width: 100%;
        height: 55px;
        z-index:2;
        padding:0 18px;
        background: white;
        border-bottom:1px solid #eee;
        text-align: center;
        font-size:18px;
        line-height: 55px;
        letter-spacing: 1px;
    }
    .home{
        display: inline-block;
        width:100%;
        height:100%;
        background: url('../static/img/home.png') no-repeat 0 center;
        background-size: 20px 19px;
    }
    .edit{
        display: inline-block;
      width:100%;
        height:100%;
        font-size:16px;
        text-align: right;
    }
    .radio-no{
      background: url('../static/img/radio-no.png') no-repeat 0 center;
    }
    .radio-yes{
      background: url('../static/img/radio-yes.png') no-repeat 0 center;
    }
    .radio{
      background-size:18px 18px;
    }
    .goods-content > h2 {
    font-size:13px;
    line-height: 18px;
    overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      display: -o-box;
      -webkit-line-clamp: 2;
      -moz-line-clamp: 2;
      -ms-line-clamp: 2;
      -o-line-clamp: 2;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      -o-box-orient: vertical;
    }
    .change-count{
    height:100%;
    line-height:20px;
    text-align:center;
    border:1px solid #eee;
  }
  .pay-fixed{
    position: fixed;
    bottom:0;
    width:100%;
    height:55px;
    padding-left: 22px;
    font-size:15px;
    line-height:55px;
    background:white;
  }
  .all-radio{
    height: 100%;
    background-size:20px 20px;
  }
  .pay{
    height: 100%;
    font-size:17px;
    text-align: center;
    color:white;
    background:#fa6913;
  }
  .car-empty{
    height:500px;
    background: url('../static/img/car-empty.png') no-repeat center 150px;
    background-size:100px 100px;
    font-size:16px;
    text-align: center;
    color:#999;
    line-height:540px;
  }
  .edit-info{
    height:20px;
    padding:12px 18px;
    background: white;
    line-height: 24px;
  }
  .edit-info .del-goods{
    height:18px;
    padding:0 22px;
    border:1px solid red;
    line-height: 18px;
    color: red;
    border-radius: 80px;
  }
</style>
